<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- include meta, stylesheets, jquery and title -->
	<ui:include src="/WEB-INF/master/implement.xhtml" />
</h:head>

<h:body>

	<!-- display items in tile format -->

	<ui:include src="/WEB-INF/master/header.xhtml" />

	<div class="container navigation">
		<ui:include src="/WEB-INF/master/navigation.xhtml" />
		<div class="col-md-10">
			<ui:include src="/WEB-INF/master/offerHeader.xhtml" />

			<!-- actual items -->
			<ui:repeat var="i" value="#{productContainer.products}" offset="#{productContainer.start}" size="#{productContainer.end}">
				<div class="col-md-4">
					<table class="table table-bordered" style="text-align: center;">
						<tbody>
							<tr>
								<td rowspan="4" style="border-right: 0; border-left: 1; border-top: 1; border-bottom: 1;">
									<h:form>
										<h:commandLink action="#{productController.ProductDetail(i.productId)}">
											<h:graphicImage rendered="#{i.shiny == false}" value="resources/img/normal/#{i.id}.png" width="100" height="100" />
											<h:graphicImage rendered="#{i.shiny == true}" value="resources/img/shiny/#{i.id}.png" width="100" height="100" />
										</h:commandLink>
									</h:form>
								</td>
							</tr>
							<tr class="span3">
								<td style="border-right: 1; border-left: 0; border-top: 1; border-bottom: 0;">##{i.id} - #{i.name}</td>
							</tr>
							<tr class="span3">
								<td style="border-right: 1; border-left: 0; border-top: 0; border-bottom: 0;">Typ: #{i.type1} #{i.type2}</td>
							</tr>
							<tr class="span3">
								<td style="border-right: 1; border-left: 0; border-top: 0; border-bottom: 1;">Level: #{i.level}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</ui:repeat>

			<!-- pagination to toggle between products -->
			<div class="row-fluid">
				<div class="col-md-12">
					<h:form style="text-align: center">
						<div class="control">
							<ul class="pagination pagination-centered">
								<li><h:commandLink value="&laquo;" action="#{productContainer.backward()}" rendered="#{productContainer.isVisible()}" disabled="#{!productContainer.isBackwardEnabled()}" /></li>
								<ui:repeat var="current" value="#{productContainer.pages}">
									<li class="active"><h:commandLink value="#{current}" action="#{productContainer.setPage(current)}" rendered="#{productContainer.isActive(current)}" /></li>
									<li><h:commandLink value="#{current}" action="#{productContainer.setPage(current)}" rendered="#{!productContainer.isActive(current)}" /></li>
								</ui:repeat>
								<li><h:commandLink value="&raquo;" action="#{productContainer.forward()}" rendered="#{productContainer.isVisible()}" disabled="#{!productContainer.isForwardEnabled()}" /></li>
							</ul>
						</div>
					</h:form>
				</div>
			</div>

		</div>
	</div>

</h:body>
</html>
